<script setup lag="ts">
import { ref } from 'vue'
import { getSkuCombinationStore } from '@/stores/modudels/product';

const skuCombinationStore = getSkuCombinationStore()
const formData = skuCombinationStore.formData

const props = defineProps(['data'])

const textDesc = ref('')

const isFocus = ref(false)
const onFocus = () => {
  isFocus.value = true
}
const onBlur = () => {
  isFocus.value = false
}

const textAreaRef = ref(null)
const onChange = (e) => {
  formData.spuContent[props.data.order].baseData = textDesc.value
  dymicComponentStore.displayContent[props.data.order].baseData = textDesc.value

}

// 改变动态数组的位置
import { useDymicComponentStore } from '@/stores/modudels/dymicComponent'
const dymicComponentStore = useDymicComponentStore()
//置顶
const topping = () => {
  dymicComponentStore.topping(props.data.order)
}
// 上移
const moveUp = () => {
  dymicComponentStore.moveUp(props.data.order)
}
// 下移
const moveDown = () => {
  dymicComponentStore.moveDown(props.data.order)
}
// 删除
const remove = () => {
  dymicComponentStore.remove(props.data.order)
}
</script>

<template>
  <div class="text_area_class_layout" ref="textAreaRef">
    <div class="header_layput">
      <span class="title">文字</span>
      <div class="button_layout">
        <el-button @click="topping">置顶</el-button>
        <el-button @click="moveUp">上移</el-button>
        <el-button @click="moveDown">下移</el-button>
        <el-button @click="remove">删除</el-button>
      </div>
    </div>

    <textarea
      v-model="textDesc"
      :class="{ focused: isFocus }"
      @focus="onFocus"
      @blur="onBlur"
      @change="onChange"
      class="text_area_layout"
      placeholder="请输入文字描述"
    ></textarea>
  </div>
</template>

<style scoped>
.text_area_class_layout {
  width: 100%;
  height: 100%;
  .header_layput {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 25px;
      margin-bottom: 10px;
    }
  }
  .text_area_layout {
    width: 100%;
    min-height: 100px;
    height: auto;
    border: 1px solid #e0e0e0;
    &.focused {
      border: 1px solid #409eff;
    }
  }
}
</style>
